<template>
    <div>
        <el-dialog :visible.sync="visible" :title="'上传'+title" width="500px" @close="clearStatus">
            <el-upload v-if="visible" class="upload-demo" ref="uploadRef" :data="uploadData" :action="importUrl" highlight-row :headers="headers" :before-upload="beforeUpload" :on-success="onSuccess" multiple :limit="1" :on-exceed="onExceed">
                <el-button slot="trigger" type="primary" size="mini">选取文件</el-button>
            </el-upload>
            <template slot="footer">
                <el-button @click="clearStatus">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
  import { openMsgs, getHeaders } from '@/utils/util';
  import { uploadValidate } from '@/utils/validate';

  export default {
    props: ['uploadData', 'importUrl', 'title'],
    data() {
      return {
        headers: getHeaders(this), //上传文件头部
        visible: false, //导出预览对话框
        fileList: [] //上传文件
      };
    },
    mounted() {
      //console.log('exportVisibleDefault', this.exportVisibleDefault);
    },
    methods: {
      beforeUpload(file) { //上传格式
        return uploadValidate(this, file, 'import', '', -1);
      },
      onSuccess(res, index) {
        if (res.code === 2000 || res.code === 200) {
          this.clearStatus();
          this.$emit('onSuccess', res);
        } else {
          this.$refs['uploadRef'].clearFiles();
        }
        openMsgs(this, '导入数据', res.msg, true, res.code, 0);
      },
      onExceed(files, fileList) {
        openMsgs(this, '', `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`, true, 'warning', 0);
      },
      initStatus(visible) {
        this.visible = visible;
        this.fileList = [];
      },
      clearStatus() {
        this.visible = false;
        this.fileList = [];
      }
    }
  };
</script>
<style scoped>
</style>
